<template>
  <el-dialog
    v-model="detailDialogVisible"
    title="商品信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="product"
      :rules="rules"
      label-width="80px"
      :status-icon="true"
    >
      <el-form-item label="商品名称" >
        {{product.name}}
      </el-form-item>
      <el-form-item label="商品型号"  >
        {{product.code}}
      </el-form-item>
        <el-form-item label="商品单位"  >
        {{product.unitName}}
      </el-form-item>
      <el-form-item label="分类" >
        {{product.categoryName}}
         
      </el-form-item>
      <el-form-item label="幅宽" prop="specs">
         {{product.spec}}
      </el-form-item>
      <el-form-item label="价格" prop="price">
        {{product.price}}
      </el-form-item>
      <el-form-item label="商品图片" prop="coverImg">
        <img v-if="product.imageUrl" :src="product.imageUrl" class="avatar" />
      </el-form-item>
      <el-form-item label="详情内容">
          <el-card class="box-card">
          
          <span v-html="product.proddesc"></span>
          </el-card>
      </el-form-item>

      <el-form-item>
  
         <el-button @click="() => {  closeDialog(false); } ">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
 
</template>

<script>
import { onMounted, reactive, toRefs,ref } from 'vue'
 
import { getRequest } from '../../utils/api';

function useLoadFormData(state,id) {
  getRequest("/product/basic/one", { id: id }).then((res) => {
    if (res && res.code == 200) {
      state.product = res.data;
    } else {
      ElMessage({
        type: "error",
        title: "失败",
        message: "查询失败",
        duration: 2000,
      });
    }

    // state.imageUrl = res.data.coverImg;
    //  editor.value.setHTML(res.data.productDetail);
  });
}

export default {
  name: 'ProductDetail',
    props: {
    detailDialogVisible: Boolean,
    productId: String,
  },
  setup(prop,{emit}) {
 
   
     const validateForm = ref();

    const state = reactive({
      product: {}
    })
    onMounted(() => {
      useLoadFormData(state,prop.productId)
    })
    function  closeDialog(visible, data){
        validateForm.value.resetFields() ;
         emit("onDetailCloseDialog", visible, data);
       }
    return {
      ...toRefs(state),
      validateForm,
      closeDialog
    }
  }
}
</script>

<style scoped>
  .data {
    display: flex;
    margin-bottom: 50px;
  }
  .data .data-item {
    flex: 1;
    margin: 0 10px;
  }
  .el-table {
    border: 1px solid #EBEEF5;
    border-bottom: none;
  }
  .has-gutter th {
    border-right: 1px solid #EBEEF5;
  }

  .has-gutter th:last-child {
    border-right: none;
  }
  .el-table__row td {
    border-right: 1px solid #EBEEF5;
  }
  .el-table__row td:last-child {
    border-right: none;
  }
</style>